<div id="structureLayout" class="xy-layout">
    <div class="xy-layout-center" data-options="border:false">
        <div class="layui-colla-item">
            <!--标题-->
            <div class="layui-colla-title">
                <div class="xy-toolbar">
                    <div class="xy-toolbar-btn">
                        <button class="layui-btn layui-btn-sm" data-type="add"><i class="layui-icon"></i>修改</button>
                        <button class="layui-btn layui-btn-sm" data-type=""><i class="layui-icon">&#xe654;</i>添加
                        </button>
                        <button class="layui-btn layui-btn-sm" data-type=""><i class="layui-icon"></i>删除</button>
                    </div>
                    <div class="xy-toolbar-search">
                        <div class="layui-input-inline">
                            <input type="text" name="name" placeholder="支持模糊查询.." autocomplete="off"
                                   class="layui-input"/>
                        </div>
                        <button lay-filter="search" class="layui-btn layui-btn-sm" data-type="search">
                            <i class="layui-icon">&#xe615;</i>查询
                        </button>
                    </div>
                </div>
            </div>
            <!--内容-->
            <div class="layui-colla-content layui-show xy-table">
                <table id="stree"></table>
            </div>
        </div>
    </div>
</div>
<style>
    table {
        margin: 0;
    }
</style>

<!--EasyUI treegrid 拖拽插件-->
<script src="../static/easyui/plugins/treegrid-dnd.js" th:src="@{/easyui/plugins/treegrid-dnd.js}"></script>
<script type="text/javascript">
    $(function () {
        layout.initLayout("#structureLayout", {
            fit: true
        });
        var editRowId;
        $('#stree').treegrid({
            url: '/structure/structureTree',
//            idField: 'id',//设置主键
////            width:'1000',
//            // checkOnSelect: true,//如果为true，当用户点击行的时候该复选框就会被选中或取消选中。如果为false，当用户仅在点击该复选框的时候才会呗选中或取消。
//            //selectOnCheck: false,//如果为true，单击复选框将永远选择行。如果为false，选择行将不选中复选框。
////            rownumberWidth: 30,
//            autoRowHeight: true,
            idField: 'id',//设置主键
            treeField: 'text',//设置显示树的字段
            fitColumns: true,//自适应宽度
            checkOnSelect: false,//如果为true，当用户点击行的时候该复选框就会被选中或取消选中。如果为false，当用户仅在点击该复选框的时候才会呗选中或取消。
            selectOnCheck: false,//如果为true，单击复选框将永远选择行。如果为false，选择行将不选中复选框。
            rownumbers: false,//显示行号
            onlyLeafCheck: true,//定义是否仅在叶子节点前显示复选框
            animate: true,//展开关闭时是否有动画效果
            fit: true,//自适应父容器
            autoRowHeight: false,
            cascadeCheck: false,
            nowrap: false,
            columns: [[
                {field: 'id', checkbox: true},
                {field: 'text', title: 'text', width: 210, editor: 'text'},
                {field: 'state', title: 'state', width: 200, editor: 'text', align: 'center'},
                {field: 'iconCls', title: 'iconCls', width: 200, editor: 'text'},
                {field: 'type', title: 'Type', width: 200, editor: 'text'}
            ]]
            ,
            //加载成功后启动拖拽功能
            onLoadSuccess: function (row, data) {
                $(this).treegrid('enableDnd', row ? row.id : null);
                active['checkboxChange'].call($(this),'#stree');
                $(this).treegrid('resize',{width:'100%',height:'100%'});
            },
            //双击行。启动编辑功能
            onDblClickRow: function (row) {
                editRowId = row.id;
                $(this).treegrid("beginEdit", editRowId);
            },
            //开始编辑之前
            onBeforeEdit: function (row) {
                //禁用拖拽功能
                $(this).treegrid('disableDnd');
            },
            //结束编辑后启动拖拽功能
            onEndEdit: function (row) {
                $(this).treegrid('enableDnd');
                editingId = undefined;

            },
            onAfterEdit: function (row) {
                $(this).treegrid('enableDnd');
                editingId = undefined;active['checkboxChange'].call($(this),$("#stree"));
            },
            //取消编辑后启动拖拽功能
            onCancelEdit: function (row) {
                $(this).treegrid('enableDnd');
                editingId = undefined;
            },
            onClickRow: function (row) {
                if (editRowId == undefined) {
                    return;
                }
                if (editRowId != row.id) {
                    $(this).treegrid('endEdit', editRowId);
                }
            }
        });
    })
</script>